.body {
    width: 76.8vw;
    height: 120vw;
    background-color: var(--layout-bg);
    overflow: hidden;
    white-space: pre-line;

    * {
        box-sizing: border-box;
    }


}

.full {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.custom_drawer_content {
    &>div {
        height: 100%;
    }

    width: 100vw;
    background-color: var(--drawer-bg);
}

.main {
    position: fixed;
    top: 0;
    width: 100vw;
    min-height: 100vh;
}

.custom_popover_content,
.custom_drawer_content {
    position: relative;
    font-family: 'Montserrat-Regular';
    height: 100%;

    :global {

        .block-ui {
            .sr-only {
                display: none !important;
            }
        }

        .MuiInputBase-root {
            font-family: 'Montserrat-Light';
        }

        .MuiInputBase-input {
            font-size: var(--m13);
            font-family: 'Montserrat-Regular';
            &::placeholder {
                font-size: var(--m11);
                color: var(--placeholder-text);
                font-family: 'Montserrat-Light';
            }

            &:-webkit-autofill,
            &:-webkit-autofill:hover,
            &:-webkit-autofill:focus,
            &:-webkit-autofill:active {
            box-shadow: 0 0 0px 1000px transparent inset;
            transition: background-color 5000s ease-in-out 0s;
            }
        }

        .MuiInputBase-input[type='number'] {

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: textfield;
            }

            color: red !important;
            appearance:textfield;
        }


        .animation_wrap {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        // 动画相关



        //前进进入
        .forward-appear,
        .forward-enter {
            transform: translateX(100%);
            opacity: 0;
            display: block !important;
        }

        .forward-appear-active,
        .forward-enter-active {
            transform: translateX(0);
            opacity: 1;
        }

        .forward-exit {
            transform: translateX(0);
            opacity: 1;
        }

        .forward-exit-active {
            transform: translateX(-100%);
            opacity: 0;
        }

        .back-appear,
        .back-enter {
            transform: translateX(-100%);
            opacity: 0;
        }

        .back-appear-active,
        .back-enter-active {
            transform: translateX(0) !important;
            opacity: 1;
        }

        .back-exit {
            transform: translateX(0);
            opacity: 1;
            z-index: 1;
        }

        .back-exit-active {
            transform: translateX(100%);
            opacity: 0;
        }

        /** END **/

        .forward-appear-active,
        .forward-enter-active,
        .forward-exit-active,
        .back-appear-active,
        .back-enter-active,
        .back-exit-active {
            /* 不同过渡阶段需要的过渡时间与缓动效果 */
            transition: all 300ms linear;
        }

        .forward-exit,
        .back-exit {
            position: absolute !important;
            width: 100%;
            top: 0;
            left: 0;
            height: 100vh;
        }
    }
}

/* popover 居中样式 */
.popover_center {
    :global {
        .MuiPaper-root {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
        }
    }
}

.paper {

    background: transparent !important;
    border: .1333vw solid #d3d3d3;
    box-shadow: 0px 0px 3.2vw rgba(0, 0, 0, 0.12) !important;

    position: relative;


    &::before {
        content: '';
        position: absolute;
        inset: 0px;
        display: block;
        z-index: -1;
        backdrop-filter: blur(28PX);
    }

}

:global {
    .king-wallet-dark {
        &::before {
            background: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(88, 59, 212, 0.1) 0%, rgba(216, 220, 255, 0) 100%)
                /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
                , linear-gradient(180deg, rgba(192, 189, 252, 0.315) 0%, rgba(212, 210, 252, 0.18) 100%) !important;
            ;
        }
    }

    .king-wallet-light {
        &::before {
            background: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(216, 220, 255, 0.18) 0%, rgba(110, 76, 252, 0) 100%)
                /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
                , linear-gradient(180deg, rgba(234, 233, 255, 0.7) 0%, rgba(238, 237, 255, 0.2) 100%) !important;
        }
    }

    .king-wallet-dark .block-ui-overlay {
        background-color: transparent !important;
    }

    .king-wallet-light .block-ui-overlay {
        background-color: transparent !important;
    }

    // @media screen and(min-width:1280px) {
    //     .king-wallet-dark {
    //         background: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(88, 59, 212, 0.1) 0%, rgba(216, 220, 255, 0) 100%)
    //             /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    //             , linear-gradient(180deg, rgba(192, 189, 252, 0.315) 0%, rgba(212, 210, 252, 0.18) 100%) !important;


    //         &::before {
    //             background: none !important;
    //         }
    //     }


    //     .king-wallet-light {
    //         background: radial-gradient(121.17% 71.95% at 49.87% 0%, rgba(216, 220, 255, 0.18) 0%, rgba(110, 76, 252, 0) 100%)
    //             /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    //             , linear-gradient(180deg, rgba(234, 233, 255, 0.7) 0%, rgba(238, 237, 255, 0.2) 100%) !important;

    //         &::before {
    //             background: none;
    //         }

    //     }
    // }


}


@media screen and (min-width:1280px) {
    .body {
        width: 360.96px;
        height: 564px;
        background-color: var(--layout-bg);
        overflow: hidden;

        div {
            &::-webkit-scrollbar {
                display: none;
            }

            scrollbar-width: none;
            -ms-overflow-style:none;
        }



    }

    .paper {

        border: .6265px solid #d3d3d3;
        //     backdrop-filter: blur(28PX);

        //     &::before {
        //         backdrop-filter: none;
        //     }
    }
    .custom_popover_content,
    .custom_drawer_content {
        :global {
            .MuiInputBase-input {
                font-size: var(--pc13);
                &::placeholder {
                    font-size: var(--pc11);
                }

            }
        }
    }




}